<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>两列布局3：display+table</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.parent{
				/* 3.父级元素设置display属性table,让其自动分配宽度*/
				display: table;
				/* 4.列宽由表格宽度和列宽度设定,并处理表格自带的边框*/
				table-layout: fixed;
				/* 5.设置宽度 */
				width: 100%;
			}
			.parent>div{
				height: 300px;
				/* 6..自己元素设置成单元格 */
				display: table-cell;
			}
			.parent .left{/*定宽*/
				width: 300px; 
				background: red;
			}
			.parent .right{/*浮动*/
				background: #00FFFF;
			}
			
			/* 
				7.display+table方案的优缺点：
					优点：浏览器兼容性比较好。
					缺点：会将所有元素的display属性设置为table相关值，受到相关制约。
			*/
		</style>
	</head>
	<body>
		<!-- 1.定义父级元素 -->
		<div class="parent">
			<!-- 2.定义子级元素 -->
			<div class="left">左侧：定宽</div>
			<div class="right">右侧：自适应</div>
		</div>
	</body>
</html>
